<template>
  <div class="layout-editor-container">
    <div style="overflow-y:auto;">
      <div class="suggest-layout-box">
        <div class="suggest-layout-title">常用布局</div>
        <div
          v-for="(suggestLayout, suggestLayoutIndex) in suggestLayouts"
          :key="suggestLayoutIndex"
          draggable="true"
          class="suggest-layout-row"
          @dragstart="handleDragRow($event, suggestLayout.cols)"
          @dragend="hanDragRowEnd($event, suggestLayout.cols)"
        >
          <div
            v-for="(col, colIndex) in suggestLayout.cols"
            :key="colIndex"
            class="suggest-layout-item"
            :style="previewColStyle({ width: col.value, height: 300 })"
          >{{ col.value }}</div>
        </div>
      </div>
      <div class="editor-box">
        <div class="editor-layout-title">自定义布局</div>
        <div class="editor-inputs-box">
          <div v-for="(ipt, iptIndex) in inputs" :key="iptIndex" class="input-item-box">
            <el-input
              v-model="ipt.value"
              size="mini"
              :maxlength="3"
              :minlength="1"
              :max="24"
              :min="1"
            />
          </div>
          <div class="controller-btn">
            <i class="el-icon-remove" title="remove-layout" @click="handleRemove" />
            <i class="el-icon-circle-plus" title="add-layout" @click="handleAdd" />
          </div>
        </div>
      </div>
      <div
        class="layout-preview-box"
        draggable="true"
        @dragstart="handleDragRow($event, inputs)"
        @dragend="hanDragRowEnd($event, inputs)"
      >
        <div
          v-for="(ipt, iptIndex) in inputs"
          :key="iptIndex"
          class="preview-item"
          :style="previewColStyle({ width: ipt.value, height: 300 })"
        >{{ ipt.value }}</div>
      </div>
      <el-form :inline="true" label-width="100px" style="margin-top:10px;">
        <el-form-item label="布局高度(px)">
          <el-input v-model.number="inputsHeight" size="mini" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import colStyle from '../mixins/methods/col-style'
const initHeight = 300
export default {
  name: 'default-layout-editor',
  mixins: [colStyle],
  data() {
    return {
      inputsHeight: initHeight,
      inputs: [{ height: initHeight, value: 24 }],
      suggestLayouts: [
        {
          cols: [
            { height: initHeight, value: 8 },
            { height: initHeight, value: 8 },
            { height: initHeight, value: 8 }
          ]
        },
        { cols: [{ height: initHeight, value: 12 }, { height: initHeight, value: 12 }] },
        { cols: [{ height: initHeight, value: 16 }, { height: initHeight, value: 8 }] },
        { cols: [{ height: initHeight, value: 8 }, { height: initHeight, value: 16 }] }
      ]
    }
  },
  computed: {
    PAGE_realTotal() {
      return this.inputs.reduce((pre, curr) => pre + +curr.value, 0)
    }
  },
  watch: {
    inputsHeight(val) {
      this.handleChangeColHeight(val)
    }
  },
  methods: {
    handleDragRow(event, row) {
      this.$emit('drag-row-start', event, row)
    },
    hanDragRowEnd(event, row) {
      this.$emit('drag-row-end', event, row)
    },
    handleChangeColHeight(height) {
      this.inputs.forEach(input => { input.height = height })
      this.suggestLayouts.forEach((row) => {
        row.cols.forEach((col) => { col.height = height })
      })
    },
    handleAverage() {
      const averageCol = 24 / this.inputs.length
      this.inputs.forEach(input => (input.value = averageCol))
    },
    handleRemove() {
      if (this.inputs.length === 1) {
        this.$message('至少需要一列布局')
        return
      }
      do {
        this.inputs.splice(this.inputs.length - 1, 1)
      } while (24 % this.inputs.length && this.inputs.length >= 1)
      this.handleAverage()
    },
    handleAdd() {
      if (this.inputs.length === 24) {
        this.$message('至多只能有二十四列布局')
        return
      }
      do {
        this.inputs.push({ value: 0, height: this.inputsHeight })
      } while (24 % this.inputs.length && this.inputs.length <= 24)
      this.handleAverage()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/variable.scss";

.layout-editor-container {
  @include default-flex;
  flex-wrap: wrap;
  flex-flow: column;
  justify-content: flex-start;
  height: 480px;
  & .editor-box {
    @include default-flex;
    @include flex-full;
    flex-wrap: wrap;
    flex-direction: column;
    & .editor-infos-box {
      @include default-flex;
      @include flex-full;
      &.suggest {
        color: $warning-color;
      }
      & .infos {
        margin: 0 1rem;
        & div {
          padding: 0.2rem 0;
        }
        & .limit {
          color: $danger-color;
        }
      }
      & .controller-btn {
        @include default-flex;
        @include cur-p;
        @include btn-icon;
        justify-content: space-between;
        flex: 1;
      }
    }
    & .editor-layout-title {
      margin-top: 1rem;
      @include btn-icon;
      text-align: center;
      font-size: 18px;
    }
    & .editor-inputs-box {
      @include default-flex;
      @include flex-full;
      flex-wrap: wrap;
      margin-top: 10px;
      & .input-item-box {
        width: 50px;
        margin-right: 5px;
        margin-top: 5px;
      }
      & .controller-btn {
        font-size: 1.8rem;
        margin-top: 5px;
        & i {
          cursor: pointer;
        }
      }
    }
  }
  & .layout-preview-box {
    @include default-flex;
    @include cur-all;
    @include flex-full;
    margin-top: 10px;
    & .preview-item {
      @include default-col-style;
      @include default-col-layout;
    }
  }
  & .suggest-layout-box {
    @include default-flex;
    @include flex-full;
    flex-wrap: wrap;
    flex: 1;
    & .suggest-layout-title {
      margin-top: 1rem;
      @include btn-icon;
      font-size: 18px;
    }
    & .suggest-layout-row {
      @include default-flex;
      @include cur-all;
      @include flex-full;
      margin: 1rem 0;
      & .suggest-layout-item {
        @include default-col-style;
        @include default-col-layout;
      }
    }
  }
}
</style>
